import React from 'react'
import { useToggle } from 'usehooks-ts'

export function Toggle () {

    const [ show, toggleShow ] = useToggle(false)

    return (
        <div className={ 'p-10 bg-black' }>
            <button className={ 'p-3 bg-rose-500 text-white mb-5' }
                    onClick={ toggleShow }>
                { show ? 'Show' : 'Hidden' }
            </button>
            {
                show && (
                    <div className={ 'w-100 aspect-video bg-purple-500' }></div>
                )
            }
        </div>
    )
}
